<template>
  <div class="" v-if="club != null">
    <span class="title">{{ club.name }}</span>
    <div v-html="club.introduce" class="content"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";

const OK = 200;
const route = useRoute();
const club = ref({});

const get = async () => {
  const num = route.params.num;
  try {
    const res = await axios.get("/api/clubs/" + num);
    console.log(res.data);
    if (res.data.code === OK) {
      club.value = res.data.data;
    } else {
      ElMessage.error(res.data.data);
    }
  } catch (error) {
    console.error("获取社团信息失败:", error);
  }
};

onMounted(() => {
  get();
});

watch(
  () => route.params.num,
  () => {
    get();
  }
);
</script>

<style scoped>
.title {
  display: block;
  font-size: 24px;
  color: #9a0e14;
  margin-top: 10px;
}
.content {
  line-height: 150%;
  padding: 20px;
  text-indent: 35px;
  text-align: left;
}
</style>
